<template>
    <div>
        <Form ref="user" :model="user" class="login-container" :rules="ruleValidate">
    
            <h2 class="title">系统登录</h2>
    
            <Form-item prop="username">
                <Input type="text" placeholder="Username" v-model="user.username">
                <Icon type="ios-person-outline" slot="prepend"></Icon>
                </Input>
            </Form-item>
            <Form-item prop="password">
                <Input type="password" placeholder="Password" v-model="user.password">
                <Icon type="ios-locked-outline" slot="prepend"></Icon>
                </Input>
            </Form-item>
    
            <Form-item>
                <Checkbox-group>
                    <Checkbox label="记住密码"></Checkbox>
                </Checkbox-group>
            </Form-item>
            <Form-item>
                <Button type="primary" style="width:100%;" @click="login">登录</Button>
            </Form-item>
        </Form>
    </div>
</template>

<script>

import storage from '../storage/storage.js'

export default {
    data() {
        return {
            user: { username: '', password: '' },
            ruleValidate: {
                username: [
                    { required: true, message: '姓名不能为空', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '密码不能为空', trigger: 'blur' }
                ]

            }
        }

    },
    methods: {
        login() {
            let formData = new FormData();
            formData.append("username", this.user.username);
            formData.append("password", this.user.password);

           

            this.$refs.user.validate((valid) => {
                if (valid) {

                    fetch("/mes/core/login", {
                        method: 'POST',
                        body: formData,
                    })
                    .then((response) => response.text())
                    .then((responseData) => {
                        var isSuccess = true;

                        if (responseData) {
                            var obj = JSON.parse(responseData);
                            if (obj) {
                                if (obj.status == 'success') {
                                    isSuccess = false;
                                    // localStorage.setItem('username', obj.username);
                                    // localStorage.setItem('authType', obj.authType);

                                    storage.addUser(obj.username,obj.authType);
                                    
                                    this.$router.push({ path: '/home' });
                                }
                            }
                        }
                        if (isSuccess) {
                            this.$Message.error('用户名或密码错误!');
                        }
                    })
                    .catch((error) => { this.$Message.error(error); });

                } else {
                    this.$Message.error('用户名或密码为空!');
                }
            })
        }
    }
}
</script>

<style>
.login-container {
    /*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    background-clip: padding-box;
    margin: 180px auto;
    width: 420px;
    padding: 35px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
}

.title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
}
</style>

